<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-left">
        <div class="brand">
          <h2 class="system-title">砂级配检测系统</h2>
          <div class="slogan">
            <a-typography-text type="primary">智能 · 高效 · 精准</a-typography-text>
          </div>
        </div>
        <div class="decoration">
          <icon-apps class="decoration-icon" />
        </div>
      </div>
      
      <div class="login-right">
        <div class="login-form">
          <h3 class="welcome-text">欢迎登录</h3>
          <a-form :model="loginInfo" class="form-container">
            <a-form-item field="username" :wrapper-col-props="{ span: 24 }" :label-col-props="{ span: 0 }">
              <a-input
                v-model="loginInfo.username"
                placeholder="请输入用户名"
                size="large"
              >
                <template #prefix>
                  <icon-user />
                </template>
              </a-input>
            </a-form-item>
            
            <a-form-item field="password" :wrapper-col-props="{ span: 24 }" :label-col-props="{ span: 0 }">
              <a-input-password
                v-model="loginInfo.password"
                placeholder="请输入密码"
                size="large"
              >
                <template #prefix>
                  <icon-lock />
                </template>
              </a-input-password>
            </a-form-item>

            <a-form-item :wrapper-col-props="{ span: 24 }" :label-col-props="{ span: 0 }">
              <div class="login-actions">
                <a-checkbox>记住密码</a-checkbox>
                <a-link>忘记密码？</a-link>
              </div>
            </a-form-item>

            <a-button type="primary" long size="large" @click="login">
              登录
            </a-button>

            <div class="other-login">
              <a-divider>其他登录方式</a-divider>
              <div class="social-login">
                <a-button shape="circle" @click="socialLogin('qq')">
                  <template #icon><icon-qq-circle-fill /></template>
                </a-button>
                <a-button shape="circle" @click="socialLogin('wechat')">
                  <template #icon><icon-wechat /></template>
                </a-button>
                <a-button shape="circle" @click="socialLogin('github')">
                  <template #icon><icon-github /></template>
                </a-button>
              </div>
            </div>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Message } from '@arco-design/web-vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const userList = [
  { username: 'admin', password: 'admin' },
  { username: 'root', password: 'root' }
]

const loginInfo = ref({
  username: '',
  password: ''
})

const login = () => {
  if (!loginInfo.value.username || !loginInfo.value.password) {
    Message.warning('用户名和密码不能为空')
    return
  }
  
  const user = userList.find(
    u => u.username === loginInfo.value.username && u.password === loginInfo.value.password
  )
  
  if (!user) {
    Message.error('用户名或密码有误')
  } else {
    Message.success('登录成功')
    router.push('/app')
  }
}

const socialLogin = (type) => {
  Message.info('功能正在开发中...')
}
</script>

<style scoped>
.login-container {
  height: 100vh;
  width: 100vw;
  background: linear-gradient(125deg, #2c3e50 0%, #3498db 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.login-container::before,
.login-container::after {
  content: '';
  position: absolute;
  width: 1000px;
  height: 1000px;
  border-radius: 50%;
  background: linear-gradient(125deg, rgba(52, 152, 219, 0.1), rgba(52, 152, 219, 0.2));
  animation: move 15s infinite linear;
}

.login-container::before {
  top: -20%;
  right: -10%;
}

.login-container::after {
  bottom: -20%;
  left: -10%;
  animation-delay: -5s;
}

@keyframes move {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.login-box {
  width: 80%;
  height: 75vh;
  max-width: 1200px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  display: flex;
  overflow: hidden;
  animation: fadeIn 0.5s ease-out;
  position: relative;
  z-index: 1;
}

.login-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.1)
  );
  backdrop-filter: blur(10px);
  border-radius: 20px;
  z-index: -1;
}

.login-left {
  flex: 1;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-6), 0.95) 0%,
    rgba(var(--primary-4), 0.95) 100%
  );
  padding: 40px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.login-left::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  transform: rotate(-45deg);
  top: -100%;
  left: -100%;
  animation: shine 8s infinite linear;
}

@keyframes shine {
  0% {
    transform: rotate(-45deg) translateY(0);
  }
  100% {
    transform: rotate(-45deg) translateY(100%);
  }
}

.brand {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.system-title {
  color: var(--color-white);
  margin: 16px 0;
  font-size: 32px;
  font-weight: bold;
}

.slogan {
  margin-top: 16px;
}

.slogan :deep(.arco-typography) {
  color: var(--color-white);
  font-size: 18px;
  opacity: 0.9;
}

.decoration {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.decoration-icon {
  font-size: 200px;
  color: rgba(255, 255, 255, 0.2);
}

.login-right {
  width: 450px;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-form {
  width: 100%;
  max-width: 320px;
}

.welcome-text {
  font-size: 24px;
  margin-bottom: 40px;
  text-align: center;
}

.form-container {
  width: 100%;
}

.form-container :deep(.arco-form-item) {
  margin-bottom: 24px;
}

.form-container :deep(.arco-form-item-wrapper) {
  width: 100%;
}

.form-container :deep(.arco-input-wrapper) {
  width: 100%;
}

.form-container :deep(.arco-btn) {
  width: 100%;
}

.login-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0;
}

.other-login {
  margin-top: 24px;
}

.social-login {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.social-login :deep(.arco-btn) {
  width: 40px;
  height: 40px;
  font-size: 20px;
}
</style>
